import { ProForm, ProFormText } from '@ant-design/pro-components';
import { Modal } from 'antd';
import { FormInstance } from 'antd/lib/form/Form';
import { useRef } from 'react';
import { TenantItem, TenantUpdateItem } from '../data';

interface UpdateTenantInfoProps {
    tenant: TenantItem;
    onSubmit: (values: TenantUpdateItem) => Promise<void>;
    onCancel: (flag?: boolean) => void;
    modalVisible: boolean;
    visibleHandler: (flag?: boolean) => void;
}

export default (props: UpdateTenantInfoProps) => {
    const {
        onSubmit: handleUpdate,
        onCancel: handleUpdateModalVisible,
        modalVisible: updateModalVisible,
        tenant
    } = props;
    const formRef = useRef<FormInstance>();

    return (
        <Modal
            title="修改客户信息"
            open={updateModalVisible}
            width={550}
            footer={null}
            centered
            onCancel={() => handleUpdateModalVisible(false)}
            afterClose={() => handleUpdateModalVisible(false)}
        >
            <ProForm<TenantUpdateItem>
                onFinish={(values) => handleUpdate(values)}
                formRef={formRef}
                layout="vertical"
            >

                <ProFormText
                    width={'xl'}
                    name="id"
                    label="id"
                    initialValue={tenant.id}
                    hidden={true}
                />

                <ProFormText
                    width={'xl'}
                    name="name"
                    label="客户名称"
                    initialValue={tenant.name}
                    placeholder="请输入"
                    rules={[{ required: true, message: '请输入客户名称' }]}
                />

                <ProFormText
                    width={'xl'}
                    name="push_url"
                    label="推送地址"
                    initialValue={tenant.push_url}
                    placeholder="请输入"
                    rules={[{ required: true, message: '请输入推送地址' }]}
                />

                <ProFormText
                    width={'xl'}
                    name="mobile"
                    label="联系方式"
                    initialValue={tenant.mobile}
                    placeholder="请输入"
                    rules={[{ required: true, message: '请输入联系方式' }]}
                />

                <ProFormText
                    width={'xl'}
                    name="mail"
                    label="邮箱"
                    initialValue={tenant.mail}
                    placeholder="请输入"
                    rules={[{ required: true, message: '请输入邮箱' }]}
                />


            </ProForm>
        </Modal>
    );
};
